<template>
	<view class="signInPage">
		<view class="backgroundImg">

		</view>
		<view class="padding40">
			<view class="signInCard">
				<view class="margin-bottom_50rpx">
					已连续签到<text style="color: #ffaa1a;">{{signDay}}</text>天
				</view>

				<!-- signInCardDetail  colorfff-->
				<view class="flex-wrap">
					<view v-for="(item,index) in items" :key="index"
						:class="[frequency==index&&index!=6 ? 'signInCardDetail-active flex-column' : index!=6 ? 'signInCardDetail flex-column' :index==6&&frequency==6 ? 'signInCardDetails-active flex-columns' : 'signInCardDetails flex-columns']"
						@click="checkInFn(index,item.amount,item.id)" class="  ">
						<view
							:class="[frequency==index&&index!=6 ? 'colorfff' : index!=6 ? 'color000' :index==6&&frequency==index ? 'colorfff' : 'color000']"
							class="">
							{{item.name}}
						</view>
						<view class="">
							<image class="icon" src="../../static/会员卡yi/微信图片_20240319142159.png" mode=""></image>
						</view>
						<view v-if="index==6" class="maximumReward flex">
							最高奖励
						</view>
						<view v-if="frequency==index" class="colorfff">

							已签到
						</view>
						<view class="colorbebebe" v-if="!(frequency==index)">

							<text>{{formattedValue(item.amount)}} 积分</text>
						</view>

					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				signDay:0,
				tabIndex: 4,
			
				frequency: 100,
				token: uni.getStorageSync('login').token,
				items: [{
						day: '第一天',
						integral: '1000积分'
					},
					{
						day: '第二天',
						integral: '2000积分'
					},
					{
						day: '第三天',
						integral: '3000积分'
					}, {
						day: '第四天',
						integral: '4000积分'
					},
					{
						day: '第五天',
						integral: '5000积分'
					}, {
						day: '第六天',
						integral: '6000积分'
					}, {
						day: '第七天',
						integral: '7000积分'
					}
				]
			}
		},
		onReady() {
			this.init()
		},
		onLoad() {
			
		},
		onShow() {

		},
		computed: {
			formattedValue: function() {
				return function(num) {

					return Number(num).toFixed(0); // 将原始值除以 100 并保留两位小数
				};
			}

		},
		methods: {
			async checkInFn(index, integral, id) {
				
				this.$sun.toast('已得到' + integral, 'none')
				// 调用签到接口
				const resPoster = await this.$http.post({
					url: this.$api.signIn,
					data: {
						id: id


					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {



					console.log(resPoster.data)

					this.$sun.toast(resPoster.msg, 'none')
					setTimeout(()=>{
						this.signLogFn()
					},700)

				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}


			},
			async init() {
				const resPoster = await this.$http.post({
					url: this.$api.signConfig,
					data: {



					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {



					console.log(resPoster.data)

					this.items = resPoster.data.list
					this.signLogFn()


				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}
			},
			// 获取到当前签到时间
			async signLogFn() {
				const resPoster = await this.$http.post({
					url: this.$api.signLog,
					data: {



					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {



					console.log(resPoster.data)

					this.frequency = resPoster.data.frequency - 1
					// this.frequency = 6
                    this.signDay=resPoster.data.frequency

				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}
			},

		}
	}
</script>

<style lang="less" scoped>
	.signInPage {


		.backgroundImg {

			background-repeat: no-repeat;
			background-size: contain;
			height: 618rpx;
			background-image: url('../../static/会员卡yi/微信图片_20240313172741.jpg');

		}

		.signInCard {

			border-radius: 20rpx;
			padding: 20rpx;
			background-color: #fff;

			.signInCardDetail-active {
				margin-bottom: 25rpx;
				margin-right: 16rpx;
				border-radius: 20rpx;
				background: linear-gradient(82.57deg, rgb(254, 231, 184) 1.895%, rgb(243, 210, 149) 93.739%);
				height: 200rpx;
				width: 23%;

				.icon {

					width: 80rpx;
					height: 80rpx;
				}
			}

			.signInCardDetails-active {
				overflow: hidden;
				margin-bottom: 25rpx;
				padding: 18rpx;
				border-radius: 20rpx;
				background: linear-gradient(82.57deg, #fee7b8 1.895%, #f3d295 93.739%);
				height: 200rpx;
				width: 48%;
				position: relative;

				.icon {
					right: -15rpx;
					bottom: -15rpx;
					position: absolute;
					width: 110rpx;
					height: 110rpx;
				}

				.maximumReward {
					position: absolute;
					width: 120rpx;
					height: 50rpx;
					top: 0rpx;
					right: 0rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #ffaa1a;
				}
			}

			.signInCardDetails {
				overflow: hidden;
				margin-bottom: 25rpx;
				padding: 18rpx;
				border-radius: 20rpx;
				background: #f6f6f6;
				height: 200rpx;
				width: 48%;
				position: relative;

				.icon {
					right: -15rpx;
					bottom: -15rpx;
					position: absolute;
					width: 110rpx;
					height: 110rpx;
				}

				.maximumReward {
					position: absolute;
					width: 120rpx;
					height: 50rpx;
					top: 0rpx;
					right: 0rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #ffaa1a;
				}
			}

			.signInCardDetail {
				margin-bottom: 25rpx;
				margin-right: 16rpx;
				border-radius: 20rpx;
				background: #f6f6f6;
				height: 200rpx;
				width: 23%;

				.icon {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.signInCardDetail:nth-child(4n) {
				margin-right: 0;
			}

			.signInCardDetail-active:nth-child(4n) {
				margin-right: 0;
			}
		}

	}

	page {
		background: #ffaa1a;
	}
</style>